<template>
	<view class="page">
		<image src="https://gfgn.oss-cn-beijing.aliyuncs.com/temp/infoBj_1731650761709.png" class="infoBj"></image>
		<view class="fixedBox">
			<view class="flex infoBox">
				<view class="flex">
					<navigator hover-class="none" url="/pages/info/infoMessage">
						<image
							:src="getValue(userInfo,'avatar')?userInfo.avatar:'../../static/index/serviceTitleBj.png'"
							class="avatar">
						</image>
					</navigator>
					<navigator hover-class="none" url="/pages/info/infoMessage" class="infoContent" v-if="userInfo">
						<view class="flex">
							<view>{{getValue(userInfo,'username')}}</view>
							<image src="../../static/info/vip.png" class="vip" v-if="isVip"></image>
						</view>
						<view class="phone">{{getValue(userInfo,'realname')}}</view>
					</navigator>
					<view class="infoContent" v-else>
						<button class="flex getphonebtn" :plain='true' open-type="getPhoneNumber"
							@getphonenumber="bindGetUserInfo"> 未登录(点击登录)</button>
					</view>
				</view>
				<navigator hover-class="none" url="/pages/info/signDay" class="sign">签到领积分</navigator>
			</view>
			<view>
				<view class="flex earningsBox">
					<image src="../../static/info/earningsBj.png" class="earningsBj"></image>
					<view class="flex earningsNum">
						<!-- <navigator hover-class="none" url="/pages/info/withdraw"> -->
						<navigator hover-class="none" url="/pages/info/myEarnings">
							<view>待提现(积分)</view>
							<view class="integral">{{awaitPoint}}</view>
						</navigator>
						<navigator hover-class="none" url="/pages/info/myEarnings">
							<view>已提现</view>
							<view class="integral allIntegral">{{tookIncome}}</view>
						</navigator>
					</view>
					<navigator hover-class="none" url="/pages/info/withdraw" class="flex withdraw" v-if="isEnable">
						<view>立即提现</view>
						<image src="../../static/info/rightArrows.png" class="rightArrows"></image>
					</navigator>
				</view>
			</view>
			<view class="orderBox">
				<image src="../../static/info/orderBj.png" class="orderBj"></image>
				<view class="orderCenter">
					<view class="otherText">订单中心</view>
					<view class="flex orderList">
						<view v-for="(item,index) in orderStatus" :key="index" class="flex orderItem"
							@click="orderClick(index)">
							<image :src="item.icon" class="orderIcon"
								:style="{ height: item.h + 'rpx',width: item.w + 'rpx' }"></image>
							<view>{{item.Text}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="otherBox">
				<view class="otherText">其他服务</view>
				<view class="flex otherList">
					<view v-for="(item,index) in otherServe" :key="index" class="flex otherItem" @click="skip(index)">
						<image :src="item.icon" class="orderIcon"
							:style="{ height: item.h + 'rpx',width: item.w + 'rpx' }" v-if="index!==3">
						</image>
						<view style="margin-top: 6rpx;" v-if="index!==3">{{item.Text}}</view>
						<image :src="item.icon" class="orderIcon"
							:style="{ height: item.h + 'rpx',width: item.w + 'rpx' }" v-if="index==3&&isEnable">
						</image>
						<view style="margin-top: 6rpx;" v-if="index==3&&isEnable">{{item.Text}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		wxAutoLogin,
		myIncome,
		bindRecommendShip,
		myVipId,
		getMemberByRecCode,
		indexKateList,
		getSettledStatus,
		enableRZ
	} from "@/common/api.js"
	import {
		getValue
	} from "../../utils/me";
	export default {
		data() {
			return {
				getValue,
				orderStatus: [{
					icon: '../../static/info/allOrder.png',
					Text: '全部订单',
					w: 58,
					h: 60,
				}, {
					icon: '../../static/info/waitUp.png',
					Text: '待上传',
					w: 52,
					h: 44,
				}, {
					icon: '../../static/info/audit.png',
					Text: '审核中',
					w: 48,
					h: 42,
				}, {
					icon: '../../static/info/accomplish.png',
					Text: '已完成',
					w: 58,
					h: 58,
				}, {
					icon: '../../static/info/turnDorn.png',
					Text: '被驳回',
					w: 48,
					h: 48,
				}],
				otherServe: [{
					icon: '../../static/info/info.png',
					Text: '个人信息',
					w: 48,
					h: 48,
				}, {
					icon: '../../static/info/vips.png',
					Text: '会员',
					w: 46,
					h: 46,
				}, {
					icon: '../../static/info/promotion.png',
					Text: '推广中心',
					w: 48,
					h: 48,
				}, {
					icon: '../../static/info/merchant.png',
					Text: '商家入驻',
					w: 38,
					h: 36,
				}, {
					icon: '../../static/info/join.png',
					Text: '邀请好友',
					w: 48,
					h: 48,
				}, {
					icon: '../../static/info/tel.png',
					Text: '联系客服',
					w: 48,
					h: 48,
				}, {
					icon: '../../static/info/setting.png',
					Text: '系统设置',
					w: 46,
					h: 48,
				}],
				pageUrlList: ['/pages/info/infoMessage', '/pages/info/myVip', '/pages/info/extensionCenter',
					'/pages/info/recruitment', '/pages/index/inviteFriends', '/pages/index/addGroup?type=' + '1',
					'/pages/info/setting',
				],
				userInfo: null,
				awaitPoint: 0,
				tookIncome: 0,
				isVip: false,
				merchant: {},
				isEnable: true
			}
		},
		onShow() {
			this.getEnableRZ();
			// #ifdef MP-WEIXIN
			this.userInfo = uni.getStorageSync('userInfo')
			// #endif
			this.userInfo ? this.myIncome() : ''
			this.indexKateList()
		},
		methods: {
			getEnableRZ() {
				enableRZ().then(res => {
					if (res.code == 200) {
						this.isEnable = res.result;
					}
				})
			},
			indexKateList() {
				indexKateList().then(res => {
					// this.menuList = res.result.slice(0, 8)
					this.codeimg = res.result[7].innerCover
				})
			},
			orderClick(index) {
				uni.setStorageSync('index', index);
				uni.switchTab({
					url: '/pages/order/order?index=' + index
				});
			},
			// 获取收益
			myIncome() {
				myIncome({
					userId: this.userInfo.id
				}).then(res => {
					this.awaitPoint = res.result.awaitPoint || 0
					this.tookIncome = res.result.tookIncome || 0
				})
				myVipId(this.userInfo.id).then(res => {
					uni.setStorageSync('isVip', res.result.isVip);
					this.isVip = res.result.isVip
				})
			},
			// 授权登录
			bindGetUserInfo(e) {
				let that = this;
				if (e.detail.errMsg != 'getPhoneNumber:ok') {
					wx.showToast({
						title: '您拒绝了授权',
						icon: 'none'
					});
					return;
				}
				that.jiamiinfo = e.detail;
				that.loginsa();
			},
			// 登录"
			loginsa() {
				let that = this
				let Logintype; // 先在外部声明Logintype变量
				if (uni.getStorageSync('recCode')) {
					Logintype = 1; // 在if块内赋值
				} else {
					Logintype = 2; // 在else块内赋值
				}
				// 在这里可以继续使用Logintype变量
				wx.showLoading({
					title: '登录中',
				})
				uni.login({
					success: res => {
						wxAutoLogin({
							code: res.code,
							data: that.jiamiinfo.encryptedData,
							iv: that.jiamiinfo.iv,
							regType: Logintype
						}).then(responts => {
							if (responts.success) {
								uni.hideLoading()
								that.userInfo = responts.result.userInfo
								uni.setStorageSync('userInfo', responts.result.userInfo);
								uni.setStorageSync('token', responts.result.token);
								myVipId(this.userInfo.id).then(res => {
									uni.setStorageSync('isVip', res.result.isVip);
								})
								if (uni.getStorageSync('recCode')) {
									getMemberByRecCode(uni.getStorageSync('recCode')).then(res => {
										if (res.success) {
											bindRecommendShip({
												userId: uni.getStorageSync('userInfo')
													.id,
												masterId: res.result.id
											}).then(req => {
												this.$toast(req.message)
											})
										}
									})
								}
								this.myIncome()
							} else {
								uni.hideLoading()
								uni.showToast({
									title: responts.message,
									icon: 'none'
								});
							}
						})
					}
				})
			},
			skip(index) {
				uni.setStorageSync('innerCover', this.codeimg)
				if (this.pageUrlList[index] == '/pages/info/recruitment') {
					uni.showLoading()
					getSettledStatus({
						createBy: this.userInfo.phone
					}).then(res => {
						uni.hideLoading()
						this.merchant = res.result
						if (this.merchant != null && this.merchant.status == 'JUDGE') {
							this.$toast('审核中,请等待')
							return false
						} else if (this.merchant != null && this.merchant.status == 'OBJECTION') {
							this.$toast('已驳回,请重新提交')
							setTimeout(() => {
								uni.navigateTo({
									url: this.pageUrlList[index]
								})
							}, 800)
							return false
						} else {
							uni.navigateTo({
								url: this.pageUrlList[index]
							})
						}
					})
				} else {
					uni.navigateTo({
						url: this.pageUrlList[index]
					})
				}
			}
			// customerservice() {
			// 	uni.navigateTo({
			// 		url: '/pages/index/addGroup?type=' + '1'
			// 	})
			// },
		}
	}
</script>
<style scoped>
	.getphonebtn {
		border: none !important;
		font-size: 30rpx;
		color: #205600;
		margin-top: 20rpx;
	}

	.phone {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 16rpx;
	}

	.vip {
		width: 54rpx;
		height: 44rpx;
		margin: 8rpx 0 0 17rpx;
	}

	.avatar {
		width: 151.34rpx;
		height: 151.34rpx;
		border-radius: 504rpx;
		margin-right: 30rpx;
	}

	.infoContent {
		padding-top: 18rpx;
		color: #1e1e1e;
		font-size: 40rpx;
		font-weight: 500;
	}

	.infoBox {
		padding: 0 40rpx 25rpx 78rpx;
		align-items: center;
		justify-content: space-between;
	}

	.integral {
		color: #ffffff;
		font-size: 48rpx;
		font-weight: 900;
	}

	.allIntegral {
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.earningsNum {
		position: absolute;
		width: 414rpx;
		height: 188rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 500;
		margin-left: 32rpx;
		padding: 35rpx 222rpx 0 50rpx;
		justify-content: space-around;
	}

	.withdraw {
		position: absolute;
		top: 42rpx;
		right: 8rpx;
		width: 176rpx;
		height: 72rpx;
		border-radius: 12rpx;
		background: #ffffff99;
		color: #333333;
		font-size: 26rpx;
		font-weight: 500;
		align-items: center;
		justify-content: center;
	}

	.earningsBj {
		width: 686rpx;
		height: 188rpx;
		margin-left: 32rpx;
	}

	.earningsBox {
		position: relative;
	}

	.orderItem {
		font-size: 24rpx;
		color: #1E1E1E;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
	}

	.orderList {
		justify-content: space-around;
		margin-top: 40rpx;
		align-items: center;
	}

	.orderCenter {
		width: 664rpx;
		height: 236rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: #FFFFFF;
		padding: 26rpx 0 0 22rpx;
		margin: 26rpx 30rpx;
		position: absolute;
		top: 64rpx;
	}

	.otherItem {
		flex: 1;
		flex-direction: column;
		width: calc((100% - 10px) / 4);
		min-width: calc((100% - 10px) / 4);
		max-width: calc((100% - 10px) / 4);
		align-items: center;
		justify-content: space-between;
	}

	/* 去除每行尾的多余边距 */
	.otherItem:nth-child(4n) {
		margin-right: 0;
	}

	.otherItem:nth-child(5) {
		margin-top: 62rpx;
	}

	.otherItem:nth-child(6) {
		margin-top: 62rpx;
	}

	.otherItem:nth-child(7) {
		margin-top: 62rpx;
	}

	/* 使最后一个元素的边距填满剩余空间 */
	.otherItem:last-child {
		margin-right: auto;
	}

	.otherList {
		flex-wrap: wrap;
		padding: 40rpx 0 56rpx;
		justify-content: flex-start;
	}

	.otherText {
		font-size: 32rpx;
		font-weight: 600;
		color: #1E1E1E;
	}

	.otherBox {
		width: 664rpx;
		height: 372rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: #FFFFFF;
		padding: 26rpx 0 0 22rpx;
		margin: 120rpx 32rpx;
		font-size: 24rpx;
		color: #1E1E1E;
	}

	.orderBox {
		width: 750rpx;
		height: 252rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		box-sizing: border-box;
		position: relative;
		margin-top: -90rpx;
	}

	.orderBj {
		width: 100%;
		height: 338rpx;
	}

	.rightArrows {
		width: 32rpx;
		height: 32rpx;
		margin: 5rpx 0 0 10rpx;
	}

	.sign {
		width: 152rpx;
		height: 48rpx;
		background: url('../../static/info/signBj.png') no-repeat;
		background-size: 152rpx 48rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFAF5A;
		line-height: 48rpx;
		text-align: center;
	}

	.infoBj {
		width: 750rpx;
		height: 1030rpx;
	}

	.fixedBox {
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 100rpx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
	}

	.page {
		position: relative;
		height: 100vh;
	}
</style>
<style>
	page {
		background: #F4F5F9;
	}
</style>